﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .tuone {
            width: 200px;
            height: 200px;
            float: left;
            /*background-color:antiquewhite;*/
            margin-bottom: 10px;
            margin-right: 300px;
        }
            .tuone img {
                width: 100%;
                height: 100%;
            }
        .tutwo {
            width: 200px;
            height: 200px;
            float: left;
            /*background-color:antiquewhite;*/
            margin-bottom: -300px;
            margin-right: -300px;
        }
        .tutwo img {
            width: 100%;
            height: 100%;
        }
        *{
            padding:0;
            margin:0;
            color:#eee;

        }
        a {
            text-decoration: none;
        }
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #2c3e50;
            background-image: linear-gradient(to right top, #916968,#2c3e50 );
        }
        h2{
            font-size:12px;
            font-weight:400;
        }
        .login{
            overflow:hidden;
            position:relative;
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            width:300px;
            height:450px;     
            background-color:#34495e;
            border-radius:10px;
            box-shadow:10px 10px 20px rgba(33,44,55,.3);
        }
            .login button:hover {
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
                /*color:antiquewhite;*/
                background-color: thistle;
            }
        h1{
            font-size:45px;
            font-weight:400;
            z-index:1;
        }
        form{
            display:flex;
            flex-direction:column;
            justify-content:space-around;
            align-items:center;
            width:100%;
            height:230px;
            z-index:1;
        }
        input{
            width:200px;
            height:40px;
            background-color:transparent;
            border:none;
            border-bottom:2px solid #eee;
            font-size:16px;
            outline:none;
        }
        input::placeholder{
            font-size:12px;
            color:#eee;
        }
        .smallbutten{
            width:90px;
            height:36px;
            border:1px solid #eee;
            border-radius:18px;
            color:#eee;
            background-color:transparent;
            font-size:14px;
            cursor:pointer;
      
        }
        span {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            background-color: #916968;
            /* 鼠标居中 */
            transform: translate(-50%, -50%);
            /* 圆的形式展开 */
            border-radius: 50%;
        }

        /* 鼠标进入 login 时的动画 */
        @keyframes in {
            0% {
                width: 0;
                height: 0;
            }

            100% {
                width: 1200px;
                height: 1200px;
            }
        }

        /* 鼠标离开 login 时的动画 */
        @keyframes out {
            0% {
                width: 1200px;
                height: 1200px;
            }

            100% {
                width: 0;
                height: 0;
            }
        }

        
    </style>
</head>
<body>
    <div class="tuone"><img src="tuzi.jpg" alt="Alternate Text" /></div>
    <div class="tutwo"><img src="laohu.jpg" alt="Alternate Text" /></div>

    <div class="login">
        <h1>Login</h1>
        <form action="">
            <input type="text" placeholder="姓名">
            <input type="password" placeholder="密码">
            <button class="smallbutten"><a href="主页.html" target="-blank" style="color:#eee">登录</a></button>
            <button class="smallbutten"><a href="注册1.html" target="_blank" style="color:#eee">注册</a></button>

        </form>
    </div>
    <h2>注：若为新用户，请先注册</h2>
    <script>
        //获取 login
        let login = document.querySelector('.login')

        let span
        let inTime, outTime
        let isIn = true //默认开关 打开
        let isOut

      
        login.addEventListener('mouseenter', function (e) {
            isOut = false //预先关闭，若不进入if语句，则不能进入鼠标离开事件里的 if
            if (isIn) {
                inTime = new Date().getTime()

                
                span = document.createElement('span')
                login.appendChild(span)

                //span 去使用 in动画
                span.style.animation = 'in .5s ease-out forwards'

                //计算 top 和 left 值，跟踪鼠标位置
                let top = e.clientY - e.target.offsetTop
                let left = e.clientX - e.target.offsetLeft

                span.style.top = top + 'px'
                span.style.left = left + 'px'

                isIn = false 
                isOut = true 
            }

        })
        //鼠标离开事件
        login.addEventListener('mouseleave', function (e) {
            if (isOut) {
                outTime = new Date().getTime()
                let passTime = outTime - inTime

                if (passTime < 500) {
                    setTimeout(mouseleave, 500 - passTime) //已经经过的时间就不要了
                }
                else {
                    mouseleave()
                }
            }

            function mouseleave() {
                span.style.animation = 'out .5s ease-out forwards'

                //计算 top 和 left 值，跟踪鼠标位置
                let top = e.clientY - e.target.offsetTop
                let left = e.clientX - e.target.offsetLeft

                span.style.top = top + 'px'
                span.style.left = left + 'px'

                //注意：因为要等到动画结束，所以要给个定时器
                setTimeout(function () {
                    login.removeChild(span)
                    isIn = true //当我们执行完鼠标离开事件里的程序，才再次打开
                }, 500)
            }
        })
    </script>
</body>
</html>